<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2025/1/4
  Time: 14:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
  <title>登陆页面</title>
  <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
  <style>
    /* 新增自定义样式 */
    .login-footer {
      position: absolute;
      bottom: 20px;
      width: 100%;
    }
    body {
      /* 设置背景图，根据实际情况修改图片路径 */
      background-image: url('<%=request.getContextPath()%>/static/images/login_beijintu.jpg');
      background-size: cover; /* 使背景图覆盖整个元素 */
      background-repeat: no-repeat; /* 不重复平铺背景图 */
      background-position: center center; /* 背景图居中显示 */
    }
    .card {
      /* 使用 rgba 颜色设置半透明背景 */
      background-color: rgba(255, 255, 255, 0.8);
    }
    .card-body {
      /* 也可以对 card-body 进行半透明设置 */
      background-color: rgba(255, 255, 255, 0.8);
    }
  </style>
</head>
<body>
<div class="container">
  <div class="row mt-5">
    <div class="col-1"></div>
    <div class="col-10">
      <div class="card mb-3 shadow-lg" >
        <div class="row no-gutters">
          <div class="col-md-5">
            <%--            <img src="<%=request.getContextPath()%>/static/images/1.jpeg" style="width: 300px; height: 500px" alt="...">--%>
            <img src="<%=request.getContextPath()%>/static/images/login.jpeg" style="width: 360px; height: 480px" alt="...">
          </div>
          <div class="col-md-7">
            <div class="card-body">
              <h5 class="card-title text-center">用户登录</h5>
              <p class="card-text">
              <form id="loginForm">
                <div class="form-group">
                  <label for="exampleInputEmail1">用户名</label>
                  <input type="text" class="form-control" id="exampleInputEmail1" name="username" required>
                  <small id="emailHelp" class="form-text text-muted">请输入正确的用户名.</small>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">密码</label>
                  <input type="password" class="form-control" id="exampleInputPassword1" name="password" required>
                </div>
                <div class="form-group">
                  <label for="inputCode">请输入验证码</label>
                  <br>
                  <input type="text" name="code" id="inputCode" required />
                  <img src="<%=request.getContextPath()%>/code" id="refreshCode"/>
                </div>
                <div class="form-group form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1" name="rememberMe">
                  <label class="form-check-label" for="exampleCheck1">记住我</label>
                </div>
                <div class="login-footer">
                  <button type="button" id="submitLogin" class="btn btn-primary">登陆</button>
                  <button type="reset" class="btn btn-secondary">重置</button>
                </div>
              </form>
              </p>
              <!-- 删除下面的元素 -->
              <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-1"></div>
  </div>
</div>

<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.min.js"></script>
<%--<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.slim.min.js"></script>--%>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script src="<%=request.getContextPath()%>/static/js/user/login.js"></script>
<script>
  document.getElementById('refreshCode').addEventListener('click', function() {
    this.src = this.src.split('?')[0] + '?' + new Date().getTime();
  });
</script>
</body>
</html>